<template>
    <div>
        <Modal
                v-model="modal"
                title="添加/编辑报名"
                :closable="false"
                :mask-closable="false"
                width="680px">
            <Form
                    ref="formValidate"
                    :model="formItem"
                    :rules="ruleValidate"
                    :label-width="80"
                    inline>
                <FormItem label="学生姓名" prop="studentName">
                    <Input v-model="formItem.studentName" placeholder="学生姓名"/>
                </FormItem>
                <FormItem label="报名日期" prop="signTime">
                    <DatePicker type="date"
                                :value="formItem.signTime"
                                placeholder="选择报名日期"
                                @on-change="handleChange">
                    </DatePicker>
                </FormItem>
                <FormItem label="科任老师" prop="teacherId">
                    <Select v-model="formItem.teacherId" @on-change="changeTeacher">
                        <Option v-for="item in teacherList" :value="item.id" :key="item.id">{{ item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="咨询老师" prop="counselId">
                    <Select v-model="formItem.counselId">
                        <Option v-for="item in counselList" :value="item.id" :key="item.id">{{ item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="科目" prop="course">
                    <Select v-model="formItem.course">
                        <Option v-for="item in courseList" :value="item" :key="item.id">{{ item}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="年级" prop="grade">
                    <Select v-model="formItem.grade">
                        <Option v-for="item in gradeList" :value="item.name" :key="item.id">{{ item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="班级类型" prop="feather">
                    <Select v-model="formItem.feather">
                        <Option v-for="item in featherList" :value="item.name" :key="item.id">{{ item.name}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="单价" prop="price">
                    <Input v-model="formItem.price" number placeholder="单价"/>
                </FormItem>
                <FormItem label="理论课时" prop="totalPeriod">
                    <Input v-model="formItem.totalPeriod" number placeholder="理论课时"/>
                </FormItem>
                <FormItem label="赠送课时" prop="giftPeriod">
                    <Input v-model="formItem.giftPeriod" placeholder="赠送课时"/>
                </FormItem>
                <FormItem label="已上课时" prop="usedPeriod">
                    <Input v-model="formItem.usedPeriod" placeholder="已上课时"/>
                </FormItem>
                <FormItem label="实际收费" prop="fees">
                    <Input v-model="computeItem.fees" disabled/>
                </FormItem>
                <FormItem label="已经消费" prop="usedFees">
                    <Input v-model="computeItem.usedFees" disabled/>
                </FormItem>
                <FormItem label="剩余课时" prop="surplusPeriod">
                    <Input v-model="computeItem.surplusPeriod" disabled/>
                </FormItem>
                <FormItem label="剩余费用" prop="surplusFees">
                    <Input v-model="computeItem.surplusFees" disabled/>
                </FormItem>
                <FormItem label="备注" prop="remark" style="width: 610px">
                    <Input type="textarea" v-model="formItem.remark"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="cancel">取消</Button>
                <Button type="primary" size="large" @click="submit('formValidate')" v-preventReClick>确定
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>

    export default {
        name: "TeacherForm",
        data() {
            return {
                roleList: [],
                formItem: {
                    id: '',
                    studentName: '',
                    signTime: '',
                    teacherId: '',
                    counselId: '',
                    course: '',
                    grade: '',
                    feather: '',
                    price: '',
                    totalPeriod: '',
                    giftPeriod: '',
                    usedPeriod: '',
                    fees: '',
                    remark: ''
                },
                teacherList: [], //科任老师集合
                counselList: [], //咨询老师集合
                gradeList: [],    //年级集合
                featherList: [], //班级类型集合
                courseList: [],  //课程集合
                ruleValidate: {
                    studentName: [
                        {required: true, message: '名字不能为空', trigger: 'blur'}
                    ],
                    teacherId: [
                        {required: true, type: 'number', message: '科任老师不能为空', trigger: 'change'}
                    ],
                    grade: [
                        {required: true, message: '年级不能为空', trigger: 'change'}
                    ],
                    feather: [
                        {required: true, message: '班级类型不能为空', trigger: 'change'}
                    ],
                    price: [
                        {required: true, type: 'number', message: '单价不能为空', trigger: 'blur'}
                    ],
                    totalPeriod: [
                        {required: true, type: 'number', message: '理论课时不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        created() {
            this.getTeacherList();
            this.getCounselList();
            this.getDictionaryList();
        },
        props: ['modal', 'modify'],
        watch: {
            modify: function () {
                this.formItem = this.modify;
                //首次进入时列出老师科目列表
                this.changeTeacher(this.formItem.teacherId)
            },
            modal: function () {

            }
        },
        computed: {
            computeItem: function () {
                let computeItem = {}
                computeItem.fees = this.getNum(this.formItem.totalPeriod * this.formItem.price)
                computeItem.usedFees = this.getNum(this.formItem.usedPeriod * this.formItem.price)
                computeItem.surplusPeriod = this.getNum(Number(this.formItem.totalPeriod) + Number(this.formItem.giftPeriod) - this.formItem.usedPeriod)
                computeItem.surplusFees = this.getNum(computeItem.surplusPeriod * this.formItem.price)
                return computeItem;
            }
        },
        methods: {
            getNum(val) {
                if (isNaN(val)) {
                    return 0;
                }
                return val;
            },
            //获取咨询老师集合
            getCounselList() {
                this.$api.userGetAll({roleIds: 2}).then(res => {
                    this.counselList = res;
                })
            },
            //获取科任老师集合
            getTeacherList() {
                this.$api.userGetAll({roleIds: 1}).then(res => {
                    this.teacherList = res;
                })
            },
            //字典集合
            getDictionaryList() {
                //年级
                this.$api.dictionaryByCode('grade').then(res => {
                    this.gradeList = res;
                })
                //班级类型
                this.$api.dictionaryByCode('feather').then(res => {
                    this.featherList = res;
                })
            },
            //提交
            submit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.formItem.status = 1
                        this.$api.curriculaSave(this.formItem).then(() => {
                            this.$parent.cancel();
                            this.$Message.success('保存成功');
                            this.$refs[name].resetFields();
                            this.$parent.getList();
                        })
                    }
                })
            },
            changeTeacher(id) {
                let teacher = this.teacherList.filter(function (item) {
                    return item.id == id;
                })
                if (null != teacher[0].course && teacher[0].course != '') {
                    this.courseList = teacher[0].course.split(",")
                    this.formItem.course = this.courseList[0]
                }
            },
            cancel() {
                this.$parent.cancel()
            },
            handleChange(date) {
                this.formItem.signTime = date;
            },
        }
    }
</script>

<style scoped lang="less">
    .ivu-form-item {
        width: 300px;
    }
</style>
